<template>
  <div class="rightbox">
    <div class="top">
      <el-button size="small" class="btn" @click="openlogin">登陆</el-button>
        <el-button size="small" @click="openset" class="btn">设置</el-button>
    </div>
    <div class="data">
      {{ selectday.split('-')[0] }}年{{ selectday.split('-')[1] }}月{{ selectday.split('-')[2] }}日 星期{{ weeks[currentWeek] }}
      <!-- {{ currentdate }} {{ currentweek }} -->
      <div>{{ curenttime }}</div>
    </div>
    <div class="detail" onselectstart="false">
      <div class="flex" v-for="(item, i) in info" :key="i">
        <div class="li">{{ i + 1 }}.<span :contenteditable="contenteditable" :class="`editor${i}`" @dblclick="editstate($event,i)" @blur="editorinfo($event,item.id)"> {{ item.things }}</span></div>
        
        <i v-if="item" class="el-icon-delete del" @click="del(item.id,i)"></i>
      </div>
    </div>
    <Weather class="weather"></Weather>
    <Set class="set" ref="set"></Set>
    <Login ref="logind" />

  </div>
</template>
<script>
import Weather from "./weather.vue";
import Set from "./set.vue";
import Login from './login.vue'

export default {
  name: "calendar",
  props: ['info','selectday','currentWeek'],
  components: {
    Weather,
    Set,
    Login
  },
  data(){
    return {
      currentdate: '',
      currentweek: '',
      curenttime: '',
      timer: undefined,
      weeks: ['日', '一', '二', '三', '四', '五', '六'],
      contenteditable: false,
      dialogTableVisible: true
    }
  },
  mounted() {
    this.getNowFormatDate()
    this.timer = setInterval(() => {
      this.getNowFormatDate()
    },1000)
  },
  unmounted() {
    clearInterval(this.timer)
  },
  methods: {
    openlogin() {
      this.$refs.logind.open()
    },
    openset() {
      this.$refs.set.open()
    },
    editstate(ev,i) {
      this.contenteditable = true
      console.log(document.querySelector('.editor' + i),'pp')
      setTimeout(() => {
        document.querySelector('.editor' + i).focus()
      },50)
      // ev.target.focus()
    },
    editorinfo(e,id) {
      this.contenteditable = false

      this.$emit('editInfo',{text: e.target.innerText,id:id})
    },
    del(item,i) {
      this.info.splice(i,1)
      this.$emit('delitem',item)
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var seperator2 = ":";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      var weeks = ['日','一','二','三','四','五','六']
      var week = date.getDay()
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
        + " " + date.getHours() + seperator2 + date.getMinutes()
        + seperator2 + date.getSeconds();
      var second = date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds();
      let minutes = date.getMinutes() < 10 ? '0'+ date.getMinutes() : date.getMinutes();
      this.currentdate = year + '年' + month + '月' + strDate +"日",
      this.currentweek = '星期'+weeks[week],
      this.curenttime = date.getHours() + seperator2 + minutes + seperator2 + second
      return currentdate;
    }
  },
}
</script>
<style scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.del {
  cursor: pointer;
}
.rightbox {
  margin-right: 20px;
}
.top {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: right;
  height: 50px;
}
.btn {
  background: rgb(30,170,160);
  color: #fff;
}
.data {
  background: rgb(30,170,160);
  color: #fff;
  padding: 10px 0;
  font-size: 20px;
  line-height: 1.5;
}
.color1{
  color: rgb(30,170,160);
}
.detail {
  text-align: left;
  padding: 20px 10px;
  line-height: 25px;
  height: calc(100vh - 327px);
  overflow: hidden;
  color: rgb(30,170,160);
  user-select: none;
  overflow: overlay;
}
.detail span {
  outline: none; 
}

.weather{
  width: 180px;
  height: 90px;
}
.detail .li {
  word-break: break-word;
}
</style>